<template>
	<view v-show="isShow" class="container" :style="{ width: popupWidth + 'px', height: popupHeight + 'px', background: bgCorlor }">
		<view @click="closePanel" class="back-btn">
			<i><image style="width: 54rpx;height: 54rpx;vertical-align: middle;" src="../../../static/icons/Iconly-Light-Arrow%20-%20Left%202.png"></image></i>
		</view>
		<view class="title">
			<i><image style="width: 54rpx;height: 54rpx;vertical-align: middle;" src="../../../static/icons/Iconly-Light-Setting.png"></image></i>
			<span class="text">设 置</span>
		</view>
		<view class="opera-area">
			<view class="opera-item" v-for="(item, index) in opera1">
				<i><image :src="item.src"></image></i>
				<span>{{ item.name }}</span>
			</view>
			<view class="divider"></view>
			<view class="opera-item" v-for="(item, index) in opera2">
				<i><image :src="item.src"></image></i>
				<span>{{ item.name }}</span>
			</view>
			<view class="divider"></view>
			<view class="opera-item" v-for="(item, index) in opera3">
				<i><image :src="item.src"></image></i>
				<span>{{ item.name }}</span>
			</view>
		</view>
		<view class="exit-btn"></view>
	</view>
</template>

<script>
export default {
	name: 'popup-panel',
	props: {
		height: {
			type: Number,
			default: 0
		},
		width: {
			type: Number,
			default: 0
		},
		bgCorlor: {
			type: String,
			default: '#FFF'
		},
		isShow: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		popupHeight() {
			// 若组件外设置了高度则使用组件外设置的高度，否则默认为整个屏幕的高度
			if (this.height) {
				return this.height;
			} else {
				// 解构获取 系统屏幕的高度
				const { screenHeight } = uni.getSystemInfoSync();
				return screenHeight;
			}
		},
		popupWidth() {
			// 若组件外设置了宽度则使用组件外设置的宽度，否则默认为整个屏幕的宽度
			if (this.width) {
				return this.width;
			} else {
				// 解构获取 系统屏幕的宽度
				const { windowWidth } = uni.getSystemInfoSync();
				return windowWidth / 2;
			}
		}
	},
	data() {
		return {
			opera1: [
				{
					src: '',
					name: '账号资料'
				},
				{
					src: '',
					name: '账号安全中心'
				},
				{
					src: '',
					name: '消息设置'
				}
			],
			opera2: [
				{
					src: '',
					name: '权限与账号管理'
				},
				{
					src: '',
					name: '用户协议'
				}
			],
			opera3: [
				{
					src: '',
					name: '隐私政策'
				},
				{
					src: '',
					name: '关于我们'
				},
				{
					src: '',
					name: '评分'
				}
			]
		};
	},
	methods: {
		closePanel(){
			this.$emit("closePanel")
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	z-index: 99999;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	.back-btn {
		margin-top: 180rpx;
	}
	.title {
		background: #fff;
		display: inline-flex;
		border-radius: 0 40px 40px 0;
		align-items: center;
		i {
			padding: 8rpx 40rpx 8rpx 60rpx;
		}
		.text {
			padding: 8rpx 40rpx 8rpx 0;
			font-size: 18px;
			color: $-color-theme-3;
		}
	}
	.opera-area{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		.opera-item{
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
		}
		.divider{
			width: calc(100% - 40rpx);
			border: 1px #FFF solid;
		}
	}
}
</style>
